<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ᠣᠶᠤᠨ᠎ᠦ ᠲᠣᠬᠢᠷᠠᠭᠤᠯᠭ᠎ᠠ</title>
    <link rel="icon" href="./favicon.ico" type="image/icon type">
    <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="elementui/index.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <script src="js/vue@2.js" type="text/javascript" charset="utf-8"></script>
    <script src="elementui/elementui.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/request.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div id="app">
    <el-tabs :tab-position="'left'" v-model="activeName">
        <el-tab-pane name="first">
            <span slot="label"><i class="iconfont icon-shezhi"></i>ᠲᠣᠬᠢᠷᠠᠭᠤᠯᠭ᠎ᠠ</span>
            <div class="row" style="margin-right: 0;">
                <label for="">ᠲᠠ {{count.upt}}% ᠬᠦᠮᠦᠨ ᠡᠴᠡ ᠬᠤᠷᠳᠤᠨ ᠪᠢᠴᠢᠵᠦ ᠪᠠᠢᠨ᠎ᠠ ᠃</label>
                <ul class="count">
                    <li>
                        <label for="">ᠦᠨᠦᠳᠦᠷ <br>ᠣᠷᠤᠭᠤᠯᠤᠭᠰᠠᠨ</label>
                        <span>{{count.today}}</span>
                    </li>
                    <li>
                        <label for="">ᠨᠡᠢᠲᠡ <br>ᠣᠷᠤᠭᠤᠯᠤᠭᠰᠠᠨ</label>
                        <span>{{count.total}}</span>
                    </li>
                    <li>
                        <label for="">ᠬᠤᠷᠳᠤᠴᠠ</label>
                        <span>{{count.speed}}KPM</span>
                    </li>
                </ul>
            </div>
            <div class="row" style="margin-left: 0;">
                <div class="radioBox">
                    <label for="">ᠺᠣᠳ᠋᠎ᠶᠢᠨ ᠲᠣᠬᠢᠷᠠᠭᠤᠯᠭ᠎ᠠ</label>
                    <el-radio v-model="code" @input="setCode" label="1">ᠬᠠᠮᠲᠤ ᠪᠡᠷ ᠡᠳᠡᠯᠡᠬᠦ ᠢᠨᠵᠧᠨᠧᠷᠢᠩ</el-radio>
                    <el-radio v-model="code" @input="setCode" label="2">ᠤᠯᠤᠰ᠎ᠤᠨ ᠪᠠᠷᠢᠮᠵᠢᠶ᠎ᠠ ᠺᠣᠳ᠋</el-radio>
                </div>
            </div>
            <div class="row" style="margin-left: 0;">
                <div class="radioBox">
                    <label for="">ᠳᠠᠷᠤᠪᠴᠢ ᠎ᠶᠢᠨ ᠪᠠᠢᠷᠢᠰᠢᠯ</label>
                    <el-radio v-model="keyCode" @input="setkey" label="1"><font>q = ᠣ (4) </font><font> c =
                        ᠴ </font><font>N = ᠩ</font></el-radio>
                    <el-radio v-model="keyCode" @input="setkey" label="2"><font>q = ᠴ </font><font>c= ᠣ (4)</font><font>
                        ; = ᠩ</font></el-radio>
                </div>
            </div>
    	    <div class="row fonts">
				<div class="radioBox font-radio">
					<label for="">ᠦᠰᠦᠭ᠎ᠤᠨ ᠲᠢᠭ <span class="tips">(ᠠᠩᠬᠠᠷᠤᠯ᠄ ᠲᠤᠳᠤ᠂ ᠮᠠᠨᠵᠤ᠂ ᠠᠯᠢ ᠭᠠᠯᠢ ᠣᠷᠤᠭᠤᠯᠬᠤ᠎ᠳᠤ ᠵᠦᠪᠬᠡᠨ ᠴᠠᠭᠠᠨ ᠲᠢᠭ᠎ᠢ ᠰᠤᠩᠭᠤᠵᠤ ᠪᠤᠯᠤᠨ᠎ᠠ᠃)</span></label>
					<el-radio-group v-model="fontA" size="small" @input="setFont">
						<el-radio :label="item.code" :style="{'font-family':item.class+'!important'}"
								  v-for="(item,index) in fonts">{{item.label}}
						</el-radio>
					</el-radio-group>
				</div>
			</div>
			<div class="row correct">
				<div class="radioBox correctDiv">
					<label for="">ᠵᠠᠯᠠᠷᠠᠭᠤᠯᠬᠤ</label>
					<el-checkbox-group v-model="correctCode" @change="correctAttr">
						<el-checkbox :label="item.code" v-for="(item,index) in correct">{{item.label}}</el-checkbox>
					</el-checkbox-group>

				</div>
			</div>
        </el-tab-pane>
        <el-tab-pane name="second">
            <span slot="label"><i class="iconfont icon-gongxiang"></i>ᠬᠤᠯᠪᠤᠭ᠎ᠠ ᠦᠭᠡ ᠲᠤᠭᠲᠠᠭᠠᠬᠤ</span>
            <div class="col" style="margin-right: 0;"><label>ᠬᠤᠯᠪᠤᠭ᠎ᠠ ᠦᠭᠡ ᠲᠤᠭᠲᠠᠭᠠᠬᠤ</label></div>
            <div class="col" style="margin: 0 5px 0 0;justify-content: flex-end;">
                <el-button type="primary" size="mini" @click="add"><i class="iconfont icon-tianjia-copy"></i> ᠰᠢᠨ᠎ᠡ
                    ᠬᠤᠯᠪᠤᠭ᠎ᠠ ᠦᠭᠡ ᠨᠡᠮᠡᠬᠦ
                </el-button>
                <el-button size="mini" @click="download">ᠪᠠᠭᠤᠯᠭᠠᠬᠤ</el-button>
                <el-button size="mini" @click="load">ᠠᠴᠢᠶᠠᠯᠠᠬᠤ</el-button>
            </div>
            <table border="" cellspacing="0" cellpadding="0" class="col">
                <tr>
                    <th>ᠳᠠᠷᠤᠪᠴᠢ</th>
                    <th>ᠬᠤᠯᠪᠤᠭ᠎ᠠ ᠦᠭᠡ</th>
                    <th>ᠪᠠᠢᠷᠢ</th>
                    <th>ᠠᠵᠢᠯᠯᠠᠭ᠎ᠠ</th>
                </tr>
                <tr v-for="item in tableData">
                    <td>
                        <span v-if="item.id !== editQuery.id">{{item.abbr}}</span>
                        <el-input v-else v-model="editQuery.abbr"></el-input>
                    </td>
                    <td>
                        <span v-if="item.id !== editQuery.id">{{item.phrase}}</span>
                        <el-input v-else v-model="editQuery.phrase"></el-input>
                    </td>
                    <td><span v-if="item.id !== editQuery.id">{{item.position}}</span>
                        <el-input v-else v-model="editQuery.position"></el-input>
                    </td>
                    <td>
								<span v-if="item.id !== editQuery.id">
							<i class="iconfont icon-bianji-copy" @click="edit(item)"></i>
							<i class="iconfont icon-shanchu-copy" @click="del(item.id)"></i>
								</span>
                        <span v-else>
									<i class="iconfont icon-duihao-copy1" @click="update"></i>
								</span>
                    </td>
                </tr>
            </table>
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange"
                           :current-page.sync="currentPage1" :pager-count="5" :total="total">

            </el-pagination>
        </el-tab-pane>
    </el-tabs>

    <el-dialog title="ᠱᠢᠨ᠎ᠡ ᠬᠣᠯᠪᠤᠭ᠎ᠠ ᠦᠭᠡ ᠨᠡᠮᠡᠬᠦ᠌" :visible.sync="dialogFormVisible" :modal-append-to-body="false"
               :top="0" :close-on-click-modal="false" style="overflow: hidden;">
        <el-form :model="form" ref="form">
            <el-form-item label="ᠳᠠᠷᠤᠪᠴᠢ(ᠠᠩᠭᠯᠢ ᠦᠰᠦᠭ᠂ ᠴᠡᠭ ᠲᠡᠮᠳᠡᠭ)" prop="name">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="ᠪᠠᠢᠷᠢ(ᠲᠤᠭ᠎ᠠ:2-10)" prop="region">
                <el-input v-model="form.region" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="ᠬᠤᠯᠪᠤᠭ᠎ᠠ ᠦᠭᠡ" prop="content">
                <el-input v-model="form.content" type="textarea" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="col">
            <el-button type="primary" @click="save">ᠬᠠᠳᠠᠭᠠᠯᠠᠬᠤ ᠪᠦᠭᠡᠳ ᠰᠢᠨ᠎ᠡ᠎ᠶᠢ ᠨᠡᠮᠡᠬᠦ</el-button>

            <el-button @click="save">ᠬᠠᠳᠠᠭᠠᠯᠠᠬᠤ</el-button>
            <el-button @click="cancel">ᠪᠤᠴᠠᠬᠤ</el-button>

        </div>
    </el-dialog>

</div>
<script>
   window.onload = function() {
		window.resizeTo(920, 700);
	};
    document.οncοntextmenu = new Function("event.returnValue=false");
    
    document.onselectstart = new Function("event.returnValue=false");
    document.addEventListener('keydown', function (event) {
    	if (event.keyCode >= 112 && event.keyCode <= 123) {
    		event.preventDefault();
    	}
    });
    document.addEventListener('contextmenu', function (event) {
    	event.preventDefault();
    });
    document.addEventListener('keydown', function (event) {
    	if (event.ctrlKey && event.key !== 'c' && event.key !== 'v' && event.key !== 'x' && event.key !== 'a') {
    		event.preventDefault();
    	}
    });
</script>
<script type="text/javascript">
    function L2M(latStr) {
        var tMgUnicode = [0x1820, 0x1821, 0x1822, 0x1823, 0x1824, 0x1825, 0x1826, 0x1827, 0x1828, 0x1829, 0x182a, 0x182b,
            0x182c, 0x182d, 0x182e, 0x182f, 0x1830, 0x1831, 0x1832, 0x1833, 0x1834, 0x1835, 0x1836, 0x1837,
            0x1838, 0x1839, 0x183a, 0x183b, 0x183c, 0x183d, 0x183e, 0x183f, 0x1840, 0x1841, 0x1842, 0x180a,
            0x180b, 0x180c, 0x180d, 0x180e, 0x202f, 0x200c, 0x200d, 0x0020, 0x000d, 0x000a, 0x1801, 0x1802,
            0x1803, 0x1804, 0x2014, 0x300a, 0x300b, 0x3014, 0x3015, 0x3008, 0x3009];

        var tMgLDCodeNew = [97, 101, 105, 113, 118, 111, 117, 69, 110, 78, 98, 112, 104, 103, 109, 108, 115, 120, 116, 100,
            99, 106, 121, 114, 119, 102, 107, 75, 67, 122, 72, 82, 76, 90, 81, 38, 39, 34, 96, 95, 45, 94, 42,
            32, 13, 10, 92, 44, 46, 58, 36, 60, 62, 91, 93, 123, 125];   // 57个

        var monStr = [];
        for (var i = 0; i < latStr.length; i++) {
            var flag = 0;
            for (var j = 0; j < 57; j++) {
                if (latStr[i] == String.fromCharCode(tMgLDCodeNew[j])) {
                    monStr.push(String.fromCharCode(tMgUnicode[j]));
                    flag = 1;
                    break;
                }
            }
            if (flag == 0) {
                monStr.push(latStr[i]);
            }
        }
        return monStr.join("");
    }

    function M2L(monStr) {
        var tMgUnicode = [0x1820, 0x1821, 0x1822, 0x1823, 0x1824, 0x1825, 0x1826, 0x1827, 0x1828, 0x1829, 0x182a, 0x182b,
            0x182c, 0x182d, 0x182e, 0x182f, 0x1830, 0x1831, 0x1832, 0x1833, 0x1834, 0x1835, 0x1836, 0x1837,
            0x1838, 0x1839, 0x183a, 0x183b, 0x183c, 0x183d, 0x183e, 0x183f, 0x1840, 0x1841, 0x1842, 0x180a,
            0x180b, 0x180c, 0x180d, 0x180e, 0x202f, 0x200c, 0x200d, 0x0020, 0x000d, 0x000a, 0x1801, 0x1802,
            0x1803, 0x1804, 0x2014, 0x300a, 0x300b, 0x3014, 0x3015, 0x3008, 0x3009];

        var tMgLDCodeNew = [97, 101, 105, 113, 118, 111, 117, 69, 110, 78, 98, 112, 104, 103, 109, 108, 115, 120, 116, 100,
            99, 106, 121, 114, 119, 102, 107, 75, 67, 122, 72, 82, 76, 90, 81, 38, 39, 34, 96, 95, 45, 94, 42,
            32, 13, 10, 92, 44, 46, 58, 36, 60, 62, 91, 93, 123, 125];   // 57个

        var latStr = [];
        for (var i = 0; i < monStr.length; i++) {
            var flag = 0;
            for (var j = 0; j < 57; j++) {
                if (monStr[i].charCodeAt(0) == tMgUnicode[j]) {
                    latStr.push(String.fromCharCode(tMgLDCodeNew[j]));
                    flag = 1;
                    break;
                }
            }
            if (flag == 0) {
                latStr.push(monStr[i]);
            }
        }
        return latStr.join("");
    }

    let port = '56181';
    let vm = new Vue({
        el: "#app",
        data() {
            get('http://127.0.0.1:' + port + '/today').then(res => {
                console.log(res);
                this.count.today = res.state;
            }).catch(err => {
                console.log(err);
            });
            get('http://127.0.0.1:' + port + '/total').then(res => {
                console.log(res);
                this.count.total = res.state;
            }).catch(err => {
                console.log(err);
            });
            get('http://127.0.0.1:' + port + '/kpm').then(res => {
                console.log(res);
                this.count.speed = res.state;
            }).catch(err => {
                console.log(err);
            });
            get('http://127.0.0.1:' + port + '/rank').then(res => {
                console.log(res);
                this.count.upt = res.state;
            }).catch(err => {
                console.log(err);
            });
            get('http://127.0.0.1:' + port + '/font').then(res => {
                console.log(res);
                this.fontA = res.state.toString();
            }).catch(err => {
                console.log(err);
            });
            get('http://127.0.0.1:' + port + '/code').then(res => {
                console.log(res);
                this.code = res.state.toString();
                console.log(this.code);
            }).catch(err => {
                console.log(err);
            });
            get('http://127.0.0.1:' + port + '/key').then(res => {
                console.log(res);
                this.keyCode = res.state.toString();
            }).catch(err => {
                console.log(err);
            });
            get('http://127.0.0.1:' + port + '/mohu').then(res => {
                console.log(res);
                var arr = [];
                for (i = 1; i < 9; i++) {
                    var s = "mohu_" + i.toString();
                    if (res[s]) {
                        arr.push(i.toString());
                    }
                }
                this.correctCode = arr;
            }).catch(err => {
                console.log(err);
            });
            get("http://127.0.0.1:56181/phrase?page=1").then(res => {
                console.log(res);
                this.total = res['total']
                this.currentPage1 = res['currentPage']
                this.tableData = res['data']
                for (var i = 0; i < this.tableData.length; i++) {
                    this.tableData[i]['id'] += 1;
                    this.tableData[i]['phrase'] = L2M(this.tableData[i]['phrase'] )
                }
            }).catch(err => {
                console.log(err);
            });
            return {
                activeName: 'first',
                count: {
                    today: '3562',
                    total: '3653562',
                    speed: '233',
                    upt: '82'
                },
                form: {
                    name: '',
                    region: '',
                    content: ''
                },
                tableData: [{
                    abbr: 'mm',
                    phrase: 'ᠺᠣᠸᠠᠳ᠋ ᠮᠧᠲ᠋ᠧᠷ',
                    position: '1',
                    id: '1'
                },
                    {
                        abbr: 'mm',
                        phrase: '㎡',
                        position: '2',
                        id: '2'

                    },
                    {
                        abbr: 'mmm',
                        phrase: 'ᠺᠦᠪ ᠮᠧᠲ᠋ᠧᠷ',
                        position: '1',
                        id: '3'

                    },
                    {
                        abbr: 'mmm',
                        phrase: 'm³',
                        position: '2',
                        id: '4'
                    },
                    {
                        abbr: 'omojq',
                        phrase: 'ᠥᠪᠥᠷ ᠮᠣᠩᠭᠣᠯ᠎ᠤᠨ ᠦᠪᠡᠷᠲᠡᠭᠡᠨ ᠵᠠᠰᠠᠬᠤ ᠣᠷᠣᠨ',
                        position: '1',
                        id: '5'
                    },
                    {
                        abbr: 'xakyqq',
                        phrase: 'ᠬᠢᠩᠭᠠᠨ ᠠᠢᠮᠠᠭ᠎ᠤᠨ ᠬᠤᠷᠴᠢᠨ ᠪᠠᠷᠠᠭᠤᠨ ᠭᠠᠷᠤᠨ  ᠡᠮᠦᠨᠡᠲᠦ ᠬᠤᠰᠢᠭᠤ',
                        position: '1',
                        id: '6'
                    },
                    {
                        abbr: 'mm',
                        phrase: 'ᠺᠣᠸᠠᠳ᠋ ᠮᠧᠲ᠋ᠧᠷ',
                        position: '1',
                        id: '7'
                    },
                    {
                        abbr: 'mm',
                        phrase: '㎡',
                        position: '2',
                        id: '8'

                    },
                    {
                        abbr: 'mmm',
                        phrase: 'ᠺᠦᠪ ᠮᠧᠲ᠋ᠧᠷ',
                        position: '1',
                        id: '9'

                    },
                    {
                        abbr: 'mmm',
                        phrase: 'm³',
                        position: '2',
                        id: '10'
                    },
                    {
                        abbr: 'omojq',
                        phrase: 'ᠥᠪᠥᠷ ᠮᠣᠩᠭᠣᠯ᠎ᠤᠨ ᠦᠪᠡᠷᠲᠡᠭᠡᠨ ᠵᠠᠰᠠᠬᠤ ᠣᠷᠣᠨ',
                        position: '1',
                        id: '11'
                    },
                    {
                        abbr: 'xakyqq',
                        phrase: 'ᠬᠢᠩᠭᠠᠨ ᠠᠢᠮᠠᠭ᠎ᠤᠨ ᠬᠤᠷᠴᠢᠨ ᠪᠠᠷᠠᠭᠤᠨ ᠭᠠᠷᠤᠨ  ᠡᠮᠦᠨᠡᠲᠦ ᠬᠤᠰᠢᠭᠤ',
                        position: '1',
                        id: '12'
                    }
                ],
                message: '123',
                code: '1',
                keyCode: '1',
                fontA: '1',
                fonts: [{
                    code: '1',
                    label: 'ᠴᠠᠭᠠᠨ ᠲᠢᠭ',
                    class: 'Qagan'
                },
                    {
                        code: '2',
                        label: 'ᠰᠤᠨᠢᠨ ᠲᠢᠭ',
                        class: 'Sonin'
                    },
                    {
                        code: '3',
                        label: 'ᠬᠠᠷ᠎ᠠ ᠲᠢᠭ',
                        class: 'Hara'
                    },
                    {
                        code: '4',
                        label: 'ᠭᠠᠷᠴᠠᠭ ᠲᠢᠭ',
                        class: 'Garqag'
                    },
                    {
                        code: '5',
                        label: 'ᠬᠠᠸᠠᠩ ᠲᠢᠭ',
                        class: 'Hawang'
                    },
                    {
                        code: '6',
                        label: 'ᠠᠭᠤᠯᠠ ᠲᠢᠭ',
                        class: 'Agula'
                    },
                    {
                        code: '7',
                        label: 'ᠭᠠᠷ ᠪᠢᠴᠮᠡᠯ ᠲᠢᠭ',
                        class: 'Garbiqimel'
                    },
                    {
                        code: '8',
                        label: 'ᠭᠤᠷᠪᠠᠨ ᠤᠯᠤᠰ ᠲᠢᠭ',
                        class: 'GurbanUlus'
                    }
                ],
                correctCode: ['1', '2'],
                correct: [{
                    code: '1',
                    label: 'ᠣ (4) ᠤ (5)᠎ᠶᠢ ᠵᠠᠯᠠᠷᠠᠭᠤᠯᠬᠤ',
                    class: 'Qagan'
                },
                    {
                        code: '2',
                        label: 'ᠲ (t) ᠳ (d)᠎ᠢ ᠵᠠᠯᠠᠷᠠᠭᠤᠯᠬᠤ',
                        class: 'Sonin'
                    },
                    {
                        code: '3',
                        label: 'ᠥ (6) ᠦ (7)᠎ᠶᠢ ᠵᠠᠯᠠᠷᠠᠭᠤᠯᠬᠤ',
                        class: 'Hara'
                    },
                    {
                        code: '4',
                        label: 'ᠡ (e) ᠧ (E)᠎ᠢ ᠵᠠᠯᠠᠷᠠᠭᠤᠯᠬᠤ',
                        class: 'Garqag'
                    },
                    {
                        code: '5',
                        label: '᠊ᠬ᠍᠊ (h) ᠊ᠭ᠍᠊ (g)᠎ᠢ ᠵᠠᠯᠠᠷᠠᠭᠤᠯᠬᠤ',
                        class: 'Hawang'
                    },
                    {
                        code: '6',
                        label: '᠊ᠨᠭ᠊ (ng) ᠩ (N)᠎ᠢ ᠵᠠᠯᠠᠷᠠᠭᠤᠯᠬᠤ',
                        class: 'Agula'
                    },
                    {
                        code: '7',
                        label: '᠊ᠰᠢ᠊ (si) ᠊ᠱᠢ᠊ (xi)᠎ᠢ ᠵᠠᠯᠠᠷᠠᠭᠤᠯᠬᠤ',
                        class: 'Garbiqimel'
                    },
                    {
                        code: '8',
                        label: 'ᠸ (w) ᠩ ᠊ᠧ᠊ (E)᠎ᠢ ᠵᠠᠯᠠᠷᠠᠭᠤᠯᠬᠤ',
                        class: 'GurbanUlus'
                    }
                ],
                currentPage1: 1,
                total: 100,
                dialogFormVisible: false,
                editQuery: {
                    id: 0,
                    abbr: '',
                    phrase: '',
                    position: ''
                },
                old_phrase: ''
            }
        },
        methods: {
            download() {
                alert('download')
            },
            load() {
                alert('load')
            },
            edit(item) {
                this.old_phrase = item['phrase'];
                this.editQuery = item
            },
            update() {
                // 更新词条，提交this.editQuery
                get('http://127.0.0.1:' + port + '/update_phrase?abbr=' + this.editQuery['abbr']
                    + '&old_phrase=' + M2L(this.old_phrase) + '&new_phrase=' + M2L(this.editQuery['phrase'])
                    + '&position=' + this.editQuery['position']
                ).then(res => {
                    console.log(res);
                }).catch(err => {
                    console.log(err);
                });

                // 重置
                this.editQuery = {
                    id: 0,
                    abbr: '',
                    phrase: '',
                    position: ''
                }


                get("http://127.0.0.1:56181/phrase?page=" + this.currentPage1).then(res => {
                    console.log(res);
                    this.total = res['total']
                    this.currentPage1 = res['currentPage']
                    this.tableData = res['data']
                    for (var i = 0; i < this.tableData.length; i++) {
                        this.tableData[i]['id'] += 1;
                        this.tableData[i]['phrase'] = L2M(this.tableData[i]['phrase'] )
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            del(id) {
                if (this.currentPage1 > 0) {
                    id = id - (this.currentPage1 - 1) * 10;
                }

                this.$confirm('此操作将永久删除该词条, 是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log("woshi  sb", id, this.tableData);
                    // 删除词条
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    console.log('http://127.0.0.1:56181/delete_phrase?phrase=' + this.tableData[id - 1]['phrase']);
                    get('http://127.0.0.1:56181/delete_phrase?phrase=' + this.tableData[id - 1]['phrase']).then(res => {
                        console.log(res);
                        get("http://127.0.0.1:56181/phrase?page=" + this.currentPage1).then(res => {
                            console.log(res);
                            this.total = res['total']
                            this.currentPage1 = res['currentPage']
                            this.tableData = res['data']
                            for (var i = 0; i < this.tableData.length; i++) {
                                this.tableData[i]['id'] += 1;
                                this.tableData[i]['phrase'] = L2M(this.tableData[i]['phrase'] )
                            }
                        }).catch(err => {
                            console.log(err);
                        })
                    }).catch(err => {
                        console.log(err);
                    });
                }).catch(() => {
                    // 取消操作
                    console.log("woshi da sb");
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            add() {
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs.form.resetFields();
                })

            },
            save() {
                // 保存词条
                // console.log("length",this.tableData.length,this.form['name'],this.form['name'].length,this.form['content'],this.form['content'].length);
                if (this.tableData.length + this.currentPage1 * 10 > 99) {
                    alert("上限超过100个短语");
                } else {
                    if (this.form['name'].length > 20) {
                        alert("缩写长度大于20");
                    } else if (this.form['content'].length > 100) {
                        alert("短语长度大于100");
                    } else {
                        get('http://127.0.0.1:' + port + '/new_phrase?abbr=' + this.form['name'] + '&phrase=' + M2L(this.form['content']) + '&position=' + this.form['region']
                        ).then(res => {
                            console.log(res);
                        }).catch(err => {
                            console.log(err);
                        });
                        get("http://127.0.0.1:56181/phrase?page=" + this.currentPage1).then(res => {
                            console.log(res);
                            this.total = res['total']
                            this.currentPage1 = res['currentPage']
                            this.tableData = res['data']
                            for (var i = 0; i < this.tableData.length; i++) {
                                this.tableData[i]['id'] += 1;
                                this.tableData[i]['phrase'] = L2M(this.tableData[i]['phrase'] )
                            }
                        }).catch(err => {
                            console.log(err);
                        });
                    }
                }

                this.dialogFormVisible = false;
            },
            cancel() {
                // 取消
                this.$refs.form.resetFields();
                this.dialogFormVisible = false;
            },
            saveAndStartNewOne() {
                // 保存词条
                if (this.tableData.length + this.currentPage1 * 10 > 99) {
                    alert("上限超过100个短语");
                } else {
                    if (this.form['name'].length > 20) {
                        alert("缩写长度大于20");
                    } else if (this.form['content'].length > 100) {
                        alert("短语长度大于100");
                    } else {
                        get('http://127.0.0.1:' + port + '/new_phrase?abbr=' + this.form['name'] + '&phrase=' + M2L(this.form['content']) + '&position=' + this.form['region']
                        ).then(res => {
                            console.log(res);
                        }).catch(err => {
                            console.log(err);
                        });
                        get("http://127.0.0.1:56181/phrase?page=" + this.currentPage1).then(res => {
                            console.log(res);
                            this.total = res['total']
                            this.currentPage1 = res['currentPage']
                            this.tableData = res['data']
                            for (var i = 0; i < this.tableData.length; i++) {
                                this.tableData[i]['id'] += 1;
                                this.tableData[i]['phrase'] = L2M(this.tableData[i]['phrase'] )
                            }
                        }).catch(err => {
                            console.log(err);
                        });
                    }
                }
                // 充值表单
                this.$refs.form.resetFields();

            },
            setCode(val) {
                console.log('http://127.0.0.1:' + port + '/code?value=' + this.code);
                get('http://127.0.0.1:' + port + '/code?value=' + this.code).then(res => {
                    console.log(res);
                }).catch(err => {
                    console.log(err);
                });
            },
            setFont(val) {
                get('http://127.0.0.1:' + port + '/font?value=' + this.fontA).then(res => {
                    console.log(res, this.fontA);
                }).catch(err => {
                    console.log(err);
                });
            },
            correctAttr(val) {
                console.log("asdfasdfas", val)
                const noarr = []
                for (var i = 1; i < 9; i++) {
                    if (this.correctCode.includes(i.toString())) {
                        const s = "mohu_" + i.toString();
                        console.log('http://127.0.0.1:' + port + '/mohu?' + s + '=1');
                        get('http://127.0.0.1:' + port + '/mohu?' + s + '=1')
                            .then((response) => {
                                console.log(response);
                            })
                            .catch((error) => {
                                console.error(error);
                            });
                    } else {
                        const s = "mohu_" + i.toString();
                        console.log('http://127.0.0.1:' + port + '/mohu?' + s + '=0');
                        get('http://127.0.0.1:' + port + '/mohu?' + s + '=0')
                            .then((response) => {
                                console.log(response);
                            })
                            .catch((error) => {
                                console.error(error);
                            });
                    }
                }

            },
            setkey(val) {
                get('http://127.0.0.1:' + port + '/key?value=' + this.keyCode).then(res => {
                    console.log(res);
                }).catch(err => {
                    console.log(err);
                });
            },
            handleCurrentChange() {
                console.log(this.currentPage1);
                get("http://127.0.0.1:56181/phrase?page=" + this.currentPage1).then(res => {
                    console.log(res);
                    this.total = res['total']
                    this.currentPage1 = res['currentPage']
                    this.tableData = res['data']
                    for (var i = 0; i < this.tableData.length; i++) {
                        this.tableData[i]['id'] += 1;
                        this.tableData[i]['phrase'] = L2M(this.tableData[i]['phrase'] )
                    }
                }).catch(err => {
                    console.log(err);
                });
            }
        }
    })
</script>
</body>

</html>
